/* 
 * Copyright (c) 2021-2024 SigScalr, Inc.
 *
 * This file is part of SigLens Observability Solution
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

* {
    box-sizing: border-box;
}

:root {
    --choose-item-background: var(--black-2);
    --search-box-input: var(--black-2);
}

[data-theme='light'] {
    --choose-item-background: var(--white-2);
    --search-box-input: var(--white-1);
}
* {
    box-sizing: border-box;
}

.dropdown-plugin {
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate3d(0px, 40px, 0px);
    z-index: 1000;
    min-width: 10rem;
    padding: 8px 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border: 1px solid var(--border-btn-color);
    border-radius: 0.25rem;
    background-color: var(--default-tab);
    max-height: 200px;
    overflow-y: scroll;
    width: 100%;
    overflow-x: hidden;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    display: none;
}
.dropdown-plugin::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}
.single-dropdown-item {
    margin: 0 5px 5px 5px;
    width: auto;
    background-color: var(--choose-item-background);
    color: var(--border-switch);
    cursor: pointer;
    padding: 4px 0;
    padding-left: 12px;
    font-weight: 400;
    border-radius: 4px;
}
.span-name-index,
.single-dropdown-item,
.span-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-toggle {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: var(--search-box-input);
    border: 1px solid var(--border-btn-color) !important;
    color: var(--text-color);
}

.dropdown-toggle.show {
    background: var(--drop-down-btn-bg-active) !important;
    outline: 1px solid var(--drop-down-btn-border-active) !important;
    outline-offset: -1pt;
}

.single-dropdown-item:hover {
    background-color: var(--index-drop-down-item-hover-bg-color);
    color: var(--index-drop-down-item-hover-text-color);
}

.single-dropdown-item.active {
    background: var(--index-drop-down-item-active-bg-color);
    color: var(--index-drop-down-item-active-text-color);
}
